<template>
    <div>
        <div class="contactGroupItemTypeHr">
            <div class="contactChar">{{ typeName }}</div>
            <hr class="contactHr">
        </div>
        <div class="contactGroupItemAvatarName" 
            v-for="(item,index) in contactItemList" 
            :key="index"
            :class="item.uniqueId === selectedItemUniqueId ? 'selectedItem' : ''"
            @click="clickContactGroupItem(item)">
            <GapView :width="20"/>
            <div class="contactGroupItemAvatarNameSubItem">
                <div class="contactGroupItemAvatar">
                    <img :src="item.avatar" alt="">
                </div>
                <GapView/>
                <div class="contactGroupItemName">{{ item.nickname }}</div>
            </div>
            <GapView/>
        </div>
    </div>
</template>
<script>
import GapView from '@/components/GapView.vue';
export default {
    name: 'ContactGroupItem',
    components: {
        GapView,
    },
    props: {
        // 类别名称
        typeName: {
            type: String,
            default: ''
        },
        // 联系人列表
        contactItemList: {
            type: Array,
            default: () => [] // [{ avatar: '', name: '名字', uniqueId: '' }]
        },
        selectedItemUniqueId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            selectedUniuqueId: '',
        };
    },
    methods: {
        clickContactGroupItem(item){
            this.$emit('clickContactGroupItemEmit', item);
        },
    },
}
</script>
<style scoped>
.contactGroupItemTypeHr{
    margin-left: 24px;
}
.contactChar{
    margin-top: 20px;
    color: var(--contactGroupContactCharColor);
    font-size: 14px;
}
.contactHr{
    border:none;
    background: var(--contactGroupContactHrColor);
    height: 1px;
    margin: 20px 0;
}
.contactGroupItemAvatarName{
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.contactGroupItemAvatarName:hover{
    background: var(--contactGroupItemAvatarNameHoverBackground);
}
.contactGroupItemAvatarName:active{
    background: var(--contactGroupItemAvatarNameActiveBackground);
}
.contactGroupItemAvatar{
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    min-width: 40px;
}
.contactGroupItemAvatar img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contactGroupItemName{
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.contactGroupItemAvatarNameSubItem{
    display: flex;
    align-items: center;
    cursor: pointer;
    width: calc(100% - 30px);
}
.selectedItem{
    background: var(--contactGroupItemSelectedBackground);
}
</style>